<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 标签页（Tab）插件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/handsontable.full.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="JavaScript" src="handsontable.full.js"></script>
<script language="JavaScript" src="lodash.js"></script>
<script language="JavaScript" src="underscore.string.js"></script>
<script language="JavaScript" src="moment.js"></script>
<script language="JavaScript" src="numeral.js"></script>
<script language="JavaScript" src="numeric.js"></script>
<script language="JavaScript" src="md5.js"></script>
<script language="JavaScript" src="jstat.js"></script>
<script language="JavaScript" src="formula.js"></script>
<script language="JavaScript" src="parser.js"></script>
<script language="JavaScript" src="ruleJS.js"></script>
<script language="JavaScript" src="handsontable.formula.js"></script>
<script language="javascript" src="bootstrap-tab.js"></script>
<script language="javascript" src="color.js"></script>
</head>
<body>
<button onClick="deleteSheet()" class="btn btn-default">删除当前激活Sheet</button>
<button onClick="getCellData()" class="btn btn-default">获取激活Sheet选中数据</button>
<button onClick="getAllChangedData()" class="btn btn-default">获取激活Sheet所有数据</button>
<button onClick="getAllKey()" class="btn btn-default">获取所有Sheet Key</button>
<button id="color" class="btn btn-default">字体颜色</button>
<button id="border" class="btn btn-default">边框颜色</button>

<div id="aaa" style="margin-top:30px;"></div>
<style type="text/css">
.ui-excel-tab{position:relative;height:42px;}
.ui-excel-left{position:absolute;left:0;top:0;width:10px;height:42px;}
.ui-excel-right{position:absolute;right:0;top:0;width:10px;height:42px;}
.ui-excel-content{overflow:hidden;margin-left:10px;margin-right:10px;}

</style>
<script language="javascript">
function getData(){
	console.log( $("#aaa").excel("getActiveTabChangedData") );
}
function deleteSheet(){
	console.log( $("#aaa").excel("removeActiveTab") );
}
function getAllChangedData(){
	console.log( $("#aaa").excel("getAllChangedData") );
}
function getCellData(){
	console.log( $("#aaa").excel("getCellData") );
}
function getAllKey(){
	console.log( $("#aaa").excel("getAllKey") );
}
function getRandRow(sheetIndex){
	var rows = [];
	for(var i = 0 ; i < 40 ;i++){
		var cols = [];
		for(var j = 0 ; j < 40 ;j++){
			cols.push( sheetIndex + " " + j);
		}
		rows.push( cols );
	}
	return rows;
}
var excelOptions = {
	readOnly:false,
	readOnlyCell:',0,',
	onClick:function(data){
		
	}
};

$("#aaa").excel(excelOptions);
for(var i = 0 ; i < 100 ; i ++){
	var config = {};
	config.id = i;
	config.rows = getRandRow(i);
	config.mergeCells = [];
	config.columns = [];
	config.cell = [{row:2,col:2,color:"rgb(153, 51, 102)"}];
	var show = false;
	if( i == 0 ){
	show = true;
	}
	$("#aaa").excel("addTab" ,{cfg:config});
}

$("#aaa").excel("show");

function getRandRow(i){
	var rows = [];
	for(var i = 0 ; i < 10 ;i++){
		var row = [];
		for(var j = 0 ; j < 50 ;j++){
		row.push(j);
		}
		rows.push(row);
	}
	return rows;
}

$("#color").color({
	onColor:function(color){
		$("#aaa").excel("setCellColor" ,color);
	}
});
$("#color").bind("click" ,function(){
	$(this).color("show");
})

$("#border").color({
	onColor:function(color){
		$("#aaa").excel("setBorderColor" ,color);
	}
});
$("#border").bind("click" ,function(){
	$(this).color("show");
})

/*
setTimeout(function(){
	$("#aaa").excel("removeActiveTab");
},1000);*/
</script>
</body>
</html>